<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    var img = new Image()
    img.src = './full_view.jpg'
    var canvasX = 800
    var canvasY = 200
    var imgW, imgH, clearX, clearY, ctx;
    var scaleX = 0.7, scaleY = 1.05
    var speed = 10
    var dx = 1
    var x = 0
    var y = 0
    img.onload = function() {
      imgW = img.width * scaleX
      imgH = img.height * scaleY
      console.log(imgW)
      clearX = imgW > canvasX ? imgW : canvasX
      clearY  = imgH > canvasY ? imgH : canvasY
      if (imgW > canvasX) {
        x = canvasX - imgW
      }

      ctx = document.getElementById('canvas').getContext('2d')
      setInterval(draw, speed)
    }
    function draw() {
      ctx.clearRect(0, 0, clearX, clearY)
      if (imgW <= canvasX) {
        if (x > canvasX) {
          x = canvasX - imgW
        }
        if (x > 0) {
          ctx.drawImage(img, x -imgW + dx, y, imgW, imgH)
        }
        if (x > imgW) {
          ctx.drawImage(img, x - 2 * imgW + dx, y, imgW, imgH)
        }
      } else {
        if (x >= canvasX) {
          x = canvasX - imgW
        }
        if (x > (canvasX - imgW)) {
          ctx.drawImage(img, x - imgW + dx, y, imgW, imgH)
        }
      }
      x += dx
      ctx.drawImage(img, x, y, imgW, imgH)
    }
  </script>
</head>
<body onload="draw()">
  <canvas id="canvas" width="800" height="200"></canvas>
</body>
</html>